<style>
    html,body {
        background: black;
    }
    </style>
    <body>
    <div class="xuetiao"style="width:100px;height:50px;background:#fff"><div class="xue"style="width:100px;height:50px;background:red"></div></div>
    </body>
    <button>点击加星星</button>
    <script>
        setInterval(function(){//2个实参 
            //造img
        var imgObj=document.createElement("img")
        imgObj.src="./star.gif"
        //随机定义星星的宽高
        var max=40
        var min=20
        var w=Math.floor(Math.random()*(max-min+1)+min)
        imgObj.width=w//img有width属性，所以不需要加px
        //随机定义位置
        var maxleft=(window.innerWidth || document.documentElement.clientWidth)-w
        var maxtop=(window.innerHeight || document.documentElement.clientHeight)-w
        imgObj.style.position="absolute"
        imgObj.style.left=Math.floor(Math.random()*(maxleft-0+1)+0)+"px"
        imgObj.style.top=Math.floor(Math.random()*(maxtop-0+1)+0)+"px"
        document.body.appendChild(imgObj)
        }, 1000)
        
        document.body.onclick=function(evt){
        var e=evt ||window.event
        var target=e.target ||e.srcElement
        if(target.nodeName == 'IMG'){
        document.body.removeChild(target)

        var xue=parseInt(document.querySelector(".xue").style.width)
        if(xue+1 !==100){
            document.querySelector(".xue").style.width=xue+1+"px"
        }
        }
        }
        //血条的定时
        setInterval(function(){
        var xue=parseInt(document.querySelector(".xue").style.width)
        document.querySelector(".xue").style.width=xue-1+"px"
        },1000)
        
        
    </script>
  
   